// 引入字体文件
require('../fonts/iconfont.css')
// 引入当前对应css
require('../less/play.less')
const {
    $http
} = require('../lib/commonJs/http.js')
const utils = require('../lib/commonJs/utils.js')

// 是否登录
utils.isLogin()

/**
 * 获取元素
 */
const video = document.querySelector('.video')
const iconVprev = document.querySelector('.icon-vprev')
const iconPlay = document.querySelector('.icon-play')
const iconVnext = document.querySelector('.icon-vnext')
const progressBar = document.querySelector('.progress-bar')

const courseIndexSelect = document.querySelector('.courseIndexSelect')
const courseIndexArr = document.querySelector('.courseIndexArr')
const courseName = document.querySelector('.courseName')

const videoMack = document.querySelector('.videoMack')
const continueBtn = document.querySelector('.continue')
const stop = document.querySelector('.stop')
const presentVideoMsgTextName = document.querySelector('.presentVideoMsgTextName')
const img = document.querySelector('.img')


// 课程数据
const fragments = JSON.parse(localStorage.getItem('fragments'))

// 当前训练
let fragmentIndex = -1

// 获取当前时间
let drillTimer = []
let drillNormlaTimer = new Date()
let drillPlayTimer = null;


// 进度条定时器
let timer = null

// 格式化总课程数
courseIndexArr.textContent = fragments.length

/**
 *  课程数据渲染
 */
function showInfo() {
    courseIndexSelect.textContent = fragmentIndex + 1
    courseName.textContent = fragments[fragmentIndex].title
    video.src = 'http://139.9.177.51:8099' + fragments[fragmentIndex].videoUrl
}

// 下一段视频
function nextfragment() {
    if (fragmentIndex < fragments.length - 1) {
        fragmentIndex++
    } else if (fragmentIndex == fragments.length - 1) {
        drillPlayTimer = new Date()
        drillTimer.push((drillPlayTimer - drillNormlaTimer) / 1000)
        drillNormlaTimer = new Date()
        console.log(drillTimer);
        showMask()
        return
    }
    clearInterval(timer)
    showProgressBar()
    showInfo()
}
nextfragment()

// 自动播放
video.addEventListener('ended', nextfragment)

// 下一个
iconVnext.addEventListener('click', nextfragment)

// 上一个
iconVprev.addEventListener('click', function () {
    if (fragmentIndex > 0) {
        fragmentIndex--
    } else {
        return
    }
    clearInterval(timer)
    showProgressBar()
    showInfo()
})

// 暂停
iconPlay.addEventListener('click', showMask)

// 进度条
function showProgressBar() {
    timer = setInterval(function () {
        progressBar.style.width = (video.currentTime / video.duration) * 100 + '%'
    }, 30)
}

// 继续训练
continueBtn.addEventListener('click', function () {
    drillNormlaTimer = new Date()
    videoMack.style.display = 'none'
    video.play()
    showProgressBar()
})

// 停止训练
stop.addEventListener('click', function () {
    // 运动时间相加
    let timerNumber = 0
    drillTimer.forEach(function (item) {
        timerNumber += item
    })
    // 获取数据
    let saveTrain = {
        id:localStorage.getItem('courseId'),
        userId:localStorage.getItem('userId'),
        takeTime:(timerNumber/60).toFixed(2),
        calorie:((timerNumber/60)*6).toFixed(2)
    }
    // 保存运动数据
    $http.post('/sports/saveTrain', saveTrain, function ({status}) {
        if(status === 0){
            location.href = './training-course.html'
        }
    })
})

/**
 * 获取间隔时间
 */
function getTimer() {
    drillPlayTimer = new Date()
    drillTimer.push((drillPlayTimer - drillNormlaTimer) / 1000)
    console.log(drillTimer);
}

function showMask() {
    // 暂停视频
    video.pause()
    // 结束定时器
    clearInterval(timer)
    // 设置图片
    img.style.backgroundImage = `url("http://139.9.177.51:8099${fragments[fragmentIndex].imgUrl}")`
    // 设置名字
    presentVideoMsgTextName.textContent = fragments[fragmentIndex].title
    // 开启模态框
    videoMack.style.display = 'block'
    // 获取间隔时间
    getTimer()
}